<template>
  <div class="page_box1">
    <div class="title">LineEcharts</div>
    <div class="echart_box">
      <BaseEcharts :options="options" :initedFunction="initedFunction" />
    </div>
  </div>
</template>

<script>
import BaseEcharts from "@/views/package/echarts/components/BaseEcharts";
import getBarOptions from "./options/groupBar3D2";
import { v4 } from "uuid";
export default {
  components: {
    BaseEcharts,
  },
  data() {
    return {
      options: null,
      resData: null,
      ids:[]
    };
  },
  methods: {
    getData() {
      const resData = [
        {
          设备名称: "三峡22F水轮发电机组",
          设备类型: "水轮发电机组设备(机械部分)",
          设备类型权重: 100.0,
          设备类型得分: 100.0,
          设备名称id: "02011M",
          fb_name: "22FB",
        },
        {
          设备名称: "三峡1F水轮发电机组",
          设备类型: "水轮发电机组设备(机械部分)",
          设备类型权重: 100.0,
          设备类型得分: 100.0,
          设备名称id: "02011M",
          fb_name: "1FB",
        },
        {
          设备名称: "三峡1F水轮发电机组",
          设备类型: "水轮发电机组设备(机械部分)",
          设备类型权重: 80.0,
          设备类型得分: 20.0,
          设备名称id: "02011M",
          fb_name: "1FB",
        },
        {
          设备名称: "三峡2F水轮发电机组",
          设备类型: "水轮发电机组设备(机械部分)",
          设备类型权重: 100.0,
          设备类型得分: 100.0,
          设备名称id: "02011M",
          fb_name: "2FB",
        },
        {
          设备名称: "三峡2F水轮发电机组",
          设备类型: "水轮发电机组设备(机械部分)",
          设备类型权重: 80.0,
          设备类型得分: 20.0,
          设备名称id: "02011M",
          fb_name: "2FB",
        },
        {
          设备名称: "三峡2F水轮发电机组",
          设备类型: "水轮发电机组设备(机械部分)",
          设备类型权重: 80.0,
          设备类型得分: 20.0,
          设备名称id: "02011M",
          fb_name: "2FB",
        },

        {
          设备名称: "三峡1F水轮发电机组",
          设备类型: "水轮发电机组设备",
          设备类型权重: 100.0,
          设备类型得分: 100.0,
          设备名称id: "02011M",
          fb_name: "1FB",
        },
        {
          设备名称: "三峡1F水轮发电机组",
          设备类型: "水轮发电机组设备",
          设备类型权重: 80.0,
          设备类型得分: 20.0,
          设备名称id: "02011M",
          fb_name: "1FB",
        },
        {
          设备名称: "三峡2F水轮发电机组",
          设备类型: "水轮发电机组设备",
          设备类型权重: 100.0,
          设备类型得分: 100.0,
          设备名称id: "02011M",
          fb_name: "2FB",
        },
        {
          设备名称: "三峡2F水轮发电机组",
          设备类型: "水轮发电机组设备",
          设备类型权重: 80.0,
          设备类型得分: 20.0,
          设备名称id: "02011M",
          fb_name: "2FB",
        },
        {
          设备名称: "三峡2F水轮发电机组",
          设备类型: "水轮发电机组设备",
          设备类型权重: 80.0,
          设备类型得分: 20.0,
          设备名称id: "02011M",
          fb_name: "2FB",
        },
      ];
      resData.forEach((item) => {
        item.id = v4();
      });
      this.resData = resData;

      const { ids, option } = getBarOptions(resData);
      console.log('ids',ids);
      this.options = option;
      this.ids = ids;
      console.log("this.options ", this.options);
    },
    // 实例化回调
    initedFunction(chart) {
      const ids = this.ids
      const resData = this.resData
      chart.on("click", function (params) {
        // 控制台打印数据的名称
        console.log('ids',ids);
        const id = ids[params.dataIndex]
        console.log('id',id);
        const obj = resData.find(item=> item.id === id)
        console.log('点击获取到的 bar data',obj);
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.page_box1 {
  width: 100%;
  height: 500px;
  display: block;
  .echart_box {
    // width: 400px;
    // height: 400px;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    background-color: #ccc;
  }
}
</style>
